<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="asideWidth" style="min-height: 96vh">
        <div
          style="
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
          "
        >
          <img
            src="@/assets/logo.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 5px"
          />
          <span v-show="!isCollapse">ChatCove</span>
        </div>
        <!-- 侧边菜单 -->
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="$route.path"
          style="border: none"
          background-color="#001529"
          text-color="rgba(255,255,255,0.65)"
          active-text-color="#fff"
        >
          <el-sub-menu index="/index">
            <template #title>
              <!-- 回头自己加图标 -->
              <el-icon><CirclePlus /></el-icon>
              <span>系统首页</span>
            </template>
            <el-menu-item index="/index/notice">
              <span>系统公告</span>
            </el-menu-item>
            <el-menu-item  index="/index/sendnotice">发布公告</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <!-- 回头自己加图标 -->
              <el-icon><CirclePlus /></el-icon>
              <span>聊天室</span>
            </template>
            <el-menu-item index="/index/PersonChatroom">
              <span>好友聊天室</span>
            </el-menu-item>
            <el-menu-item index="/index/MultipleChatroom">
              <span>多人聊天室</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 右边头部 -->
        <el-header>
          <el-icon id="menuButton" v-show="!isCollapse" @click="handleCollapse"
            ><Fold />
          </el-icon>
          <el-icon id="menuButton" v-show="isCollapse" @click="handleCollapse"
            ><Expand
          /></el-icon>
          <!-- 个人下拉菜单 -->
          <div id="person">
            <!-- 全屏功能的实现 -->
            <el-icon @click="handleFull" style="margin-right: 20px"
              ><FullScreen
            /></el-icon>
            <!-- 个人头像 -->
            <el-dropdown placement="bottom">
              <el-avatar class="avatar" :src="data.avatar" shape="circle" fit="fill"   />
              <template #dropdown>
                <el-dropdown-menu>
                  <!--未登入 -->
                  <el-dropdown-item v-if="!data.userId" @click="login">登录</el-dropdown-item>
                  <el-dropdown-item v-if="!data.userId" @click="register">注册</el-dropdown-item>
                  <!--已登入-->
                  <el-dropdown-item v-if="data.userId" @click="goToUserCenter" >个人中心 </el-dropdown-item>
                  <el-dropdown-item v-if="data.userId" @click="clear">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 右边主区域 -->
        <el-main style="padding-bottom: 0%">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUser} from '@/store/index'
/* import { ArrowRight } from "@element-plus/icons-vue"; */
import api from "@/api/service";
import { CirclePlus } from "@element-plus/icons-vue";
const router = useRouter();
const isCollapse = ref(false); //菜单栏是否展开的状态
const asideWidth = ref("200px"); //菜单栏的宽度
const data = useUser(); //存储当前用户的数据
//获取用户信息，聊天室列表，用户好友列表，将其存储在pinia中
if(localStorage.getItem("token") != null){
  api.getUserInfo().then(resp=>{
  const tempUser = JSON.parse(resp.user);
  data.userId = tempUser.userId;
  data.userName = tempUser.userName;
  data.avatar = tempUser.avatar;
  data.userType = tempUser.userType;
  // const publicMessageStore = publicMessage();
  api.getMyChatRoomList().then( ()=>{
    api.getFriend().then( resp=>{
      data.friendList = resp.list;
      data.privateChatRoomList = resp.chatRooms;
      api.getFriendRequest();
      //console.log("数据以获得")
    })
  });
});
}
// const avatar = ref(data.userId == null ? api.defaultAvatar : data.avatar); //当前用户的头像
//侧边栏是否展开的函数
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  asideWidth.value = isCollapse.value ? "64px" : "200px";
};
//实现全屏的函数
const handleFull = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};
//登录
function login() {
  router.push("/login");
}
//注册
function register() {
  router.push("/register");
}
//清空本地localstorge 并刷新
async function  clear() {
  await router.push('/')
  localStorage.removeItem("token");
  location.reload(); //浏览器刷新
}
//跳转到个人中心页面
const goToUserCenter = ()=>{
  router.push('/index/userCenter');
}
</script>
  
<style>
.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  display: flex;
  align-items: center;
  font-size: 20px;
}
#person {
  display: flex;
  flex: 1;
  justify-content: end;
  align-items: center;
}
/* 移除图片的聚焦黑边 */
.avatar {
  outline: none;
}
#menuButton {
  width: 30px !important;
}
/* 设置侧边栏的颜色 */
.el-aside {
  background-color: #001529;
}
.el-menu--inline .el-menu-item {
  background-color: #000c17;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: #fff;
}
</style>
  